<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .outer {
            width: 500px;
            height: 300px;
            background-color: red;
        }
        
        .inner {
            width: 300px;
            height: 200px;
            background-color: green;
        }
        
        .mostInner {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 点击内层标签会触发事件冒泡，触发父标签对应的事件 -->
        <div class="outer" @click="outClick">
            <!-- stop： 事件到此为止，不要向上传递 -->

            <div class="inner" @click.stop="innerClick"></div>

        </div>
        <!-- prevent: 阻止默认事件发生 点击不会跳转 -->
        <a href="wwww.cctv.com" @click.prevent>央视</a>

        <!--capture: 捕获冒泡，即有冒泡发生时，
        有该修饰符的dom元素会先执行，如果有多个，
        从外到内依次执行，然后再按自然顺序执行触发的事件 -->

        <div class="outer" @click.capture="outClick">
            <div class="inner" @click.capture="innerClick">
                <div class="mostInner" @click.capture="mostInnerClick"></div>
            </div>
        </div>
        <p></p>
        <br>
        <!-- self:
            将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响 -->

        <div class="outer" @click.self="outClick">
            <div class="inner" @click="innerClick">
                <div class="mostInner" @click="mostInnerClick"></div>
            </div>
        </div>
        <br>
        <!--  once：
            设置事件只能触发一次，比如按钮的点击等。-->
        <button @click.once="sendEmail">发送邮件Send Email</button>

    </div>




    <script>
        new Vue({
            el: "#app",
            methods: {
                outClick() {
                    console.log("外层div被点击outer click");
                },
                innerClick() {
                    console.log("内层div被点击inner click"); //也属于外层的一部分
                },
                mostInnerClick() {
                    console.log("最内层div被点击inner click"); //也属于外层的一部分
                },
                sendEmail() {
                    console.log("发送邮件send email success");
                }
            }
        });
    </script>
</body>

</html>